<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box {
				width: 6.25rem;
				height: 6.25rem;
				background-color: palevioletred;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
		<script>
			window.onload = function() {
				/*
				 * 拖拽流程
				 * 1、当鼠标在被拖拽元素上按下时，开始拖拽
				 * 2、当鼠标移动时被拖拽的元素跟着鼠标移动
				 * 3、当鼠标松开时，被拖拽元素固定在当前位置 
				 */
				var box = document.getElementById("box");
				drag(box)
				
				/* 
				* obj -要被拖拽的元素
				 */
				function drag(obj){
					obj.onmousedown = function(event) {
						var event = event || window.event;
						// div的偏移量：鼠标.clientX - 元素.offsetLeft
						var ol = event.clientX - obj.offsetLeft;
						var ot = event.clientY - obj.offsetTop;
						// 设置obj捕获所有鼠标按下的事件
						obj.setCapture && obj.setCapture();
					
						// 为document绑定一个onmousemove事件
						document.onmousemove = function(event) {
							var event = event || window.event;
							// 鼠标移动时被拖拽元素跟着移动
							var left = event.clientX;
							var top = event.clientY;
							// 修改obj元素的值
							obj.style.left = left-ol + "px";
							obj.style.top = top-ot + "px";
						}
						// 为document绑定一个鼠标松开事件
						document.onmouseup = function(event) {
							// 当松开鼠标时，被拖拽元素固定在当前位置
							// 取消document的onmousemove事件
							document.onmousemove = null;
							// 同时，document的onmouseup事件也要取消
							document.onmouseup = null;
							// 当鼠标松开时，取消对事件的捕获
							obj.releaseCapture && obj.releaseCapture();
						}
						
						/* 
						* 当我们施接一个问页中的内容时,
						* 浏览器会然认去援素引中接索内容，
						* 此时会导致施功能的异常,
						* 这个是测器供的认行为如果不希望发生这个行为,
						* 则可以通过 return fa1se来取消认行为 
						* 但是，IE8不起作用。
						* 
						* 设当btne1对标按下相关的事件进行捕获，
						* 当调用一个元素的setCapture()方法以后,
						* 这个元将会把下一次所有的鼠标按下相关的事件到自身上；
						* 元素将会自动将下一次鼠标点击相关的事件捕获到自身上
						*/
						return false;
					}
				}
			}
		</script>
	</body>
</html>
